#{extends 'include/base.html' /}
#{set title:'D.FRWI' /}
<div class="slider">
    <div id='mySwipe' style='width:100%;margin:0 auto' class='swipe'>
        <div class='swipe-wrap'>
        #{if list}
        #{list items:list,as :'item'}
            <div><a href="${item.keyId}"><img src="${item.imageurl}" alt=""/></a></div>
        #{/list}
        #{/if}
        </div>
    </div>
</div>
<img src="../public/images/iconfont-xiangyou.png" alt="" class="right_nav"/>
<img src="../public/images/iconfont-xiangzuo.png" alt="" class="left_nav"/>
<div class="tap">

    <ul class="tap_ul">
        <li class="gray_bar"></li>
        <li #{if news==0}class="tap_ul_active"#{/if}><a href="@{Application.index(type,0)}">最新</a></li>
        <li #{if news==1}class="tap_ul_active"#{/if}><a href="@{Application.index(type,1)}">最热</a></li>
        <li class="gray_bar"></li>
        <div class="clear"></div>
    </ul>
</div>
<section id="main">

    <ul class="main_ul">

        <li class="index_more" alt="2">
            <img src="../public/images/load.png" alt=""/>
            <p>浏览更多</p>
        </li>
    </ul>
    <div class="clear"></div>

</section>
<script id="headertpl" type="text/template">
        {@each data as it,index}
        <li alt="&(it.updateTime)&">
            <section class="main_ul_photo">
                <a href="${host}Application/article?id=&(it.id)&">
                <img src="&(it.photoUrl)&" alt=""/>
                    </a>
            </section>
            <section class="main_ul_section">
                <p class="main_ul_section_p"> <a href="${host}Application/article?id=&(it.id)&">&(it.title)&</a></p>
                <span class="main_ul_section_span">BY <a href="${host}Concerns/concernMan?userId=&(it.authorId)&">&(it.authorName?it.authorName:"佚名")&</a></span>
                <div class="main_view">
                    <p><img src="../public/images/view.png" alt=""/>&(it.click)&</p><p><img src="../public/images/rep.png" alt=""/>&(it.commentNum)&</p>
                </div>
            </section>
        </li>
        {@/each}
</script>
<script src="@{'/public/javascripts/swipe.js'}" type="text/javascript"></script>
<script src="@{'/public/javascripts/juicer.js'}" type="text/javascript"></script>
<script>
    juicer.set({
        'tag::operationOpen': '{@',
        'tag::operationClose': '}',
        'tag::interpolateOpen': '&(',
        'tag::interpolateClose': ')&',
        'tag::commentOpen': '{#',
        'tag::commentClose': '}'
    });
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {
        // startSlide: 4,
        auto: 3000
        // continuous: true,
        // disableScroll: true,
        // stopPropagation: true,
        // callback: function(index, element) {},
        // transitionEnd: function(index, element) {}
    });
    $('.right_nav').click(function () {
        mySwipe.next();
    })
    $('.left_nav').click(function () {
        mySwipe.prev();
    })
    $(document).ready(function($) {
        var news = ${news};
        if(news){
            getHeatedArticle(9,${type},1,0,function(data){
                if(data.result==1) {
                    var html = juicer($("#headertpl").html(), data);
                    $('.main_ul').prepend(html);
                    $(".index_more").prev("li").addClass("visual");
                }
            })
        }
        else{
            getNewestArticle(9,${type},1,0,function(data){
                if(data.result==1) {
                    var html = juicer($("#headertpl").html(), data);
                    $('.main_ul').prepend(html);
                    $(".index_more").prev("li").addClass("visual");
                }
            })
        }

    });
    var url ="${host}";
    $(".index_more").click(function () {
        $(".index_more").prev("li").removeClass("visual");
        var page = $(".index_more").attr('alt');
        $(".index_more").attr('alt',page+1);
        var news = ${news};
        if(news){
            getHeatedArticle(9,${type},page,0,function(data){
                if(data.result==1) {
                    var html = juicer($("#headertpl").html(), data);
                    $(html).insertBefore(".index_more");
                    $(".index_more").prev("li").addClass("visual");
                }
                else{
                    $(".index_more").prev("li").removeClass("visual");
                }
            })
        }
        else{
            getNewestArticle(9,${type},page,0,function(data){
                if(data.result==1){
                    var html = juicer($("#headertpl").html(),data);
                    $(html).insertBefore(".index_more");
                    $(".index_more").prev("li").addClass("visual");
                }
                else{
                    $(".index_more").prev("li").removeClass("visual");
                }

            })
        }
    })
    function getHeatedArticle(perpage,type,page,time,successCB){
        $.get(url+'api/getHeatedArticle?perpage='+perpage+'&type='+type+'&page='+page+'&time='+time, function(data) {
            successCB(data);
        });
    }
    function getNewestArticle(perpage,type,page,time,successCB){
        $.get(url+'api/getNewestArticle?perpage='+perpage+'&type='+type+'&page='+page+'&time='+time, function(data) {
            successCB(data);
        });
    }

</script>

